<template>
  <div class="row justify-center items-center gt-xs ">
    <div class="col-auto">
      <q-pagination
        v-model="pagination.pageNum"
        :max-pages="5"
        :max="Math.ceil(pagination.total/pagination.pageSize)"
        boundary-links
        @update:model-value="updateData"
      />
    </div>
    <div class="col-auto">
      <q-btn
        label="跳至"
        class="q-mr-sm"
        dense
        unelevated
        flat
        color="primary"
        @click="changePage"
      />
      <span class="inline-block q-mr-sm cc-design-page">
        <q-input
          outlined
          dense
          @keyup.enter="changePage"
          v-model="inputPage"
          :input-style="{ fontSize: '12px', width: '15px'}"
        />
      </span>
      <span>页</span>
    </div>
    <div class="col-auto">
      <span class="q-pl-sm q-pr-xs text-grey-7">每页数</span>
      <q-chip square color="primary" outline dense class="bg-blue-1">
        {{ pagination.pageSize }}
      </q-chip>
    </div>
    <div class="col-auto">
      <span class="q-ml-sm q-mr-xs text-grey-7">总条数</span>
      <q-chip square color="primary" outline dense class="bg-blue-1">
        {{ pagination.total }}
      </q-chip>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onMounted, watch, PropType } from 'vue';

export interface paginateItem {
  pageNum: number,
  pageSize: number,
  total: number
}
export default defineComponent({
  name: 'AmyPagination',
  props: {
    pageMsg: {
      type: Object as PropType<paginateItem>,
      default: () => {
        return {
          pageNum: 1,
          pageSize: 10,
          total: 20
        }
      }
    }
  },
  setup (props, context) {
    //数据解构
    const {
      pageMsg
    } = toRefs(props);

    //跳转页号
    const inputPage = ref(1);

    //pagination组件变量
    let pagination = ref({
      pageNum: 1,
      pageSize: 10,
      total: 20
    });

    //定义分页插件数据
    const updateData = (pageNum: number) => {
      context.emit('update', pageNum);
    }

    //点击按钮事件
    const changePage = () => {
      pagination.value.pageNum = inputPage.value;
      context.emit('update', pagination.value.pageNum);
    };

    //初始化
    const init = () => {
      pagination.value.pageNum = pageMsg.value.pageNum;
      pagination.value.pageSize = pageMsg.value.pageSize;
      pagination.value.total = pageMsg.value.total;
    }

    //监视数据源
    watch(() => pageMsg, () => {
      init();
    }, { deep: true });

    //加载数据
    onMounted(() => {
      init();
    });

    return {
      inputPage,
      pagination,
      updateData,
      changePage
    }
  }
})
</script>

<style lang="scss">
.cc-design-page{
  .q-field{
    &--dense{
      .q-field__control, .q-field__marginal{
        height: 26px !important;
      }
    }
  }
}

</style>
